<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通知</title>

<link rel="stylesheet" type="text/css" href="../Styles/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>

<script type="text/javascript" src="../Styles/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../Scripts/vue.min.js"></script>
<script type="text/javascript" src="../Styles/laypage/laypage.js"></script>

<style>
h2 {
	padding-left: 7%;
}

.table_notice {
	width: 80%;
	margin: auto;
}

.sea {
	width: 80%;
	margin: auto;
	margin-bottom: 15px;
}

#adduser {
	float: right;
	margin-right: 15px;
}

.form-control {
	width: 100px;
}
#seach {
  margin-left:50px;
}
.ss{
  margin-left:50px;
 }
</style>
</head>
<body>
	<div>
		<h2>用户管理</h2>
		<div class="sea">
			<span class="ss">用户名</span>:<input type="text" name="" id="username"> <span class="ss">真实姓名</span>:<input type="text" name="" id="uname">
			
			<button class="btn btn-default" id="seach"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>搜索</button>
			
		</div>
		<div class="table_notice">

			<table class="table table-bordered" id="table">
				<tr class="success">
					<td colspan="7">用户列表 <span class="glyphicon glyphicon-plus" id="adduser">新增用户</span></td>
				</tr>
				<tr class="info">
					<th>排序</th>
					<th>用户名</th>
					<th>真实姓名</th>
					<th>角色</th>
					<th>机构</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
				<tr v-for="user in userList" class="danger">
					<td>{{$index+1}}</td>
					<td>{{user.username}}</td>
					<td>{{user.uname}}</td>
					<td>{{user.rolename}}</td>
					<td>{{user.seabout}}</td>
					<td>{{user.ustate}}</td>

					<td><button type="button" class="btn btn-default btn-xs update" v-bind:value=user.uid>修改</button>&nbsp;&nbsp;
						<button type="button" class="btn btn-default btn-xs delete" v-bind:value=user.uid>删除</button>
						<button type="button" class="btn btn-default btn-xs updatePass" v-bind:value=user.username>修改密码</button>
					</td>
				</tr>

			</table>
			<div id="layPage" ></div>
		</div>
		
				<div class="modal fade  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"  id="edit-details">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title">信息编辑</h4>
							</div>
							
							<div class="modal-body">
							  <form action="../changePlanWork" method="post" id="plan-from">
							    <input type="hidden" value="{{plan.pid}}" name="pid">
								<table class="table table-s2" id="table-s2">
								   <tr>
								      <td>账号</td>
								      <td id="account"></td>
								   </tr>
								   <tr>
								      <td>新密码</td>
								      <td><input type="password" id="newPass"></td>
								   </tr>
								</table>
							 </form>
							</div>
							<div class="modal-footer" id="table-footer">	
							   <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> 
							   <button type="button" class="btn btn-primary from-submit" data-dismiss="modal">提交</button>
							  
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal-dialog -->
				</div>

	</div>
	<script type="text/javascript">
    $(function () { 
    	var currentPage=1;
    	var notice = new Vue({
    		el:"#table",
    		data:{userList:""},
    		methods:{
    			getNoticeList:function(){
    				var username = $("#username").val();
    				var uname =	$("#uname").val();
    				var _self = this;
    				$.ajax({
    		    		url:'../getUserList',
    		    		type:'post',
    		    		data:{'currentPage':currentPage,'username':username,'uname':uname},
    		    		dataType:'json',
    		    		success : function(result){
    		    			console.log(result);
    		    			_self.userList=result.userList;  		    			
    		    			laypage({
        						cont:$("#layPage"),//分页内容所有显示的容器位置 
        						pages:result.total,//分页显示的总页数
        						 curr:currentPage,//当前页
        						 skin:'molv',//皮肤
        						 skip:true,//支持跳页的功能
        						 last:'尾页',
        						 groups:result.limt, 
        						 jump:function(obj,first){//触发分页后的回调
        							 currentPage=obj.curr;
        							 if(!first){//一定要加此判断，否则初始时会无限刷新
        								 notice.getNoticeList();//获取当前页
        							 }
        						 }
        					});

    		    		}
    		    	});
    			}
    		}
    	})
    	notice.getNoticeList();
    	
    	 $("#seach").click(function(){
    		 console.log("test");
    	    	notice.getNoticeList();
    	  })
    	
    	 $(function(){
        	 $("#submit").click(function(){
        		 $("#form").submit();
        	 })
         })
    	
    
    	//查看详情
        $("#table").on('click','.update', function(){
        	var nid=$(this).val();
        	var href ="updateInformation.jsp?nid="+nid;
        	console.log(href);
        	window.location.href=href; 
 
        })
        
        
         $("#table").on('click','.delete', function(){
        	var nid=$(this).val();
        	console.log(nid);
        	$.ajax({
        		url:'../deleteUser',
        		type:'post',
        		data:{'nid':nid},
        		dataType:'json',
        		success:function(result){
        			if(result==true){
        				alert("删除成功")
        				notice.getNoticeList();
        			}else{
        				alert("删除失败")
        				notice.getNoticeList();
        			}
        		}
        	})
        })
        
        $("#table").on('click','.updatePass',function(){
        	var userName = $(this).val();
        	$("#edit-details").modal("show");
        	$("#account").html(userName);
        	$("#newPass").val("");
        })
        
        $(".from-submit").click(function(){
        	var userName = $("#account").html();
        	console.log(userName);
        	var pass = $("#newPass").val();
        	$.ajax({
        		url:'../changeOtherPass',
        		type:'post',
        		data:{'userName':userName,'pass':pass},
        		dataType:'json',
        		success : function(result){
        			if(result){
        				alert("修改成功!");
        			}
        		}
        	})
        })
        
    })  
    
    $("#adduser").click(function(){
    	window.location.href="adduser.jsp";
    })
   
    
</script>
	<script type="text/javascript">
  
</script>
</body>
</html>